@charset "UTF-8";

body {
    margin: 0;
    padding: 0;
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section {
    display: block;
}

body {
    line-height: 1;
}

ol,ul {
    list-style: none;
}

blockquote,q {
    quotes: none;
}

blockquote:before,blockquote:after,q:before,q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    font-family: "Microsoft Yahei","微软雅黑";
}

.cmp-page-index {
    position: relative;
    min-width: 980px;
    overflow: hidden;
    zoom: 1;
}

.cmp-page-index .section0 {
    position: relative;
    height: 1.14rem;
    overflow: hidden;
}

.cmp-page-index .section0 h1 {
    width: 342px;
    height: 82px;
    margin: .23rem auto 0;
    overflow: hidden;
    zoom: 1;
    text-indent: -9999px;
    color: transparent;
    background: url("/Public/Home/images/xy/logo_becb717.png") no-repeat;
    background-size: 342px 82px;
}

.cmp-page-index .section0 .hr {
    position: relative;
    margin: .03rem auto;
    padding: 0;
    display: block;
    width: .095rem;
    height: .02rem;
    background: url("/Public/Home/images/line_icon_485d1f6.png") no-repeat;
    background-size: .095rem .02rem;
}

.cmp-page-index .section0 h2 {
    text-align: center;
    font-weight: 700;
    font-size: .05rem;
    letter-spacing: 1px;
    color: #fff;
}

.cmp-page-index .section0 p {
    padding-top: .02rem;
    padding-bottom: .1rem;
    font-size: .022rem;
    line-height: .036rem;
    text-align: center;
    color: #fff;
    opacity: .8;
}

.cmp-page-index .section0 .down-wrap {
    position: relative;
    text-align: center;
    font-size: 0;
}

.cmp-page-index .section0 .main-btn {
    position: relative;
    display: inline-block;
    width: .3rem;
    height: .067rem;
    margin: 0 .02rem;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    border: 2px solid #fff;
    transition: background .2s,border .2s;
}

.cmp-page-index .section0 .main-btn span {
    position: absolute;
    left: 50%;
    margin-left: -.07rem;
    top: 50%;
    margin-top: -.02rem;
    margin-left: -.06rem;
    width: .14rem;
    height: .04rem;
    line-height: .04rem;
    text-align: center;
    font-size: .024rem;
}

.cmp-page-index .section0 .main-btn:hover {
    background: #ff7363;
    border: 2px solid #ff7363;
}

.cmp-page-index .section0 .btn-ios i {
    position: absolute;
    top: 50%;
    left: .07rem;
    margin-top: -.017rem;
    width: .024rem;
    height: .029rem;
    background: url("/Public/Home/images/xy/ios_white_cdf5d8e.png") no-repeat;
    background-size: .024rem .029rem;
}

.cmp-page-index .section0 .btn-android i {
    position: absolute;
    top: 50%;
    left: .07rem;
    margin-top: -.015rem;
    width: .025rem;
    height: .028rem;
    background: url("/Public/Home/images/xy/android_white_48a95a8.png") no-repeat;
    background-size: .025rem .028rem;
}

.cmp-page-index .section0 .main-qrcode-icon {
    position: absolute;
    top: 50%;
    margin-top: -.011rem;
    left: 55%;
    margin-left: .27rem;
    width: .022rem;
    height: .022rem;
    background: url("/Public/Home/images/xy/qrcode_white_54ccbf3.png") no-repeat;
    background-size: .022rem .022rem;
}

.cmp-page-index .section0 .main-qrcode-icon:hover .main-qrcode {
    opacity: 1;
    transform: scale(1);
}

.cmp-page-index .section0 .main-qrcode {
    position: absolute;
    top: 50%;
    margin-top: -.082rem;
    left: .05rem;
    width: .144rem;
    height: .144rem;
    padding: .01rem;
    background: rgba(255,255,255,.8);
    border-radius: 5px;
    opacity: 0;
    transform: scale(0);
    transform-origin: left center;
    transition: all .3s ease;
}

.cmp-page-index .section0 .main-qrcode img {
    width: .144rem;
    height: .144rem;
}

.cmp-page-index .section0 .main-qrcode .small-tringle {
    position: absolute;
    top: 50%;
    margin-top: -14px;
    left: -13px;
    width: 13px;
    height: 28px;
    background-repeat: no-repeat;
}

.cmp-page-index .section0 .arrow-down {
    position: absolute;
    left: 50%;
    margin-left: -11.5px;
    bottom: 24%;
    display: block;
    width: .023rem;
    height: .009rem;
    background: url("/Public/Home/images/arrow_down_6a792a0.png") no-repeat;
    background-size: .023rem .009rem;
    animation: jump 1.2s ease-in-out infinite;
}

@keyframes jump {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0);
    }
}

.cmp-page-index .section-wrap {
    position: relative;
    height: 2.36rem;
    background: #fff;
}

.cmp-page-index .section1 .tringle {
    position: absolute;
    left: 50%;
    margin-left: -.96rem;
    display: block;
    height: 0;
    width: 0;
    font-size: 0;
    line-height: 0;
    border-style: solid;
    transform: translate3d(0,0,0);
    border-width: .171rem .96rem;
}

.cmp-page-index .section1 .tringle.tringle-top {
    top: -.338rem;
    border-color: transparent transparent #fff #fff;
}

.cmp-page-index .section1 .shadow0 {
    position: absolute;
    top: .08rem;
    left: 50%;
    margin-left: -.8355rem;
    width: 1.671rem;
    height: .976rem;
    background: url("/Public/Home/images/shadow0_93c3ca7.png") no-repeat;
    background-size: 1.671rem .976rem;
}

.cmp-page-index .section1 .feature-wrap {
    position: absolute;
    top: .38rem;
    left: 50%;
    margin-left: .03rem;
}

.cmp-page-index .section1 .pic0 {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -.67rem;
    width: .441rem;
    height: .741rem;
}

.cmp-page-index .section1 .pic1 {
    position: absolute;
    top: -.1rem;
    left: 50%;
    margin-left: -.478rem;
    width: .454rem;
    height: .756rem;
}
.cmp-page-index .section1 .pic2 {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -.67rem;
    width: .441rem;
    height: .741rem;
}

.cmp-page-index .section1 .bubble-wrap {
    position: absolute;
    top: 0rem;
    left: 50%;
    margin-left: -.32rem;
    width: .52rem;
    height: .428rem;
    overflow: hidden;
}

.cmp-page-index .section1 .bubble-wrap .bubble-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -.15rem;
    margin-left: -.12rem;
    width: .329rem;
    height: .333rem;
}

.cmp-page-index .section1 .bubble-wrap .bubble-content {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -.17rem;
    margin-left: -.105rem;
    width: .317rem;
    height: .281rem;
}

.cmp-page-index .section1 .bubble-wrap .bubble-cover {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -.24rem;
    margin-left: -.28rem;
    width: .52rem;
    height: .428rem;
}











.cmp-page-index .section2 .shadow1 {
    position: absolute;
    top: 1.3rem;
    left: 50%;
    margin-left: -.8245rem;
    width: 1.649rem;
    height: .796rem;
    background: url("/Public/Home/images/shadow1_11341c3.png") no-repeat;
    background-size: 1.649rem .796rem;
}

.cmp-page-index .section2 .pic0 {
    position: absolute;
    top: 1.16rem;
    left: 50%;
    margin-left: -.67rem;
    width: .441rem;
    height: .741rem;
}
.cmp-page-index .section2 .pic1 {
    position: absolute;
    top: 1.06rem;
    left: 50%;
    margin-left: -.478rem;
    width: .454rem;
    height: .756rem;
}
.cmp-page-index .section2 .feature-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: .01rem;
    position: absolute;
    top: 1.4rem;
    left: 50%;
    margin-left: .01rem;
}

.cmp-page-index .section3 .pic3 {
    position: absolute;
    top: 2.2rem;
    left: 50%;
    margin-left: -.61rem;
    width: .493rem;
    height: .795rem;
}

.cmp-page-index .section3 .pic3-video {
    position: absolute;
    top: 2.49rem;
    left: 50%;
    margin-left: -.596rem;
    width: .474rem;
    height: .267rem;
}

.cmp-page-index .section3 .feature-wrap {
    position: absolute;
    top: 2.4rem;
    left: 50%;
    margin-left: .01rem;
}

.cmp-page-index .section4 .copyright {
    position: absolute;
    top: 2.2rem;
    left: 50%;
    margin-left: -.64rem;
    width: 1.28rem;
    font-size: 12px;
    text-align: center;
    line-height: 18px;
    color: #7d7d7d;
}

.cmp-page-index .section4 .copyright a {
    color: #7d7d7d;
    font-style: normal;
    cursor: pointer;
    text-decoration: none;
}

.cmp-page-index .section4 .copyright i {
    display: block;
    margin: 0 auto 15px;
    width: 39px;
    height: 52px;
    background-repeat: no-repeat;
}

.cmp-page-index .container {
    backface-visibility: hidden;
    transform: translateZ(0);
    transform-origin: top center;
}

.cmp-page-index .feature-wrap {
    font-size: .02rem;
    z-index: 1;
}

.cmp-page-index .feature-wrap h2 {
    font-size: .05rem;
    font-weight: 700;
    color: #545454;
}

.cmp-page-index .feature-wrap .feature-list {
    margin-top: .02rem;
    font-size: .02rem;
    margin-top: .02rem;
    font-size: .02rem;
    line-height: .036rem;
    color: #2d2d2d;
}

.cmp-page-index .feature-wrap .feature-list li {
    position: relative;
    padding-left: .016rem;
    overflow: hidden;
}

.cmp-page-index .feature-wrap .feature-list li i {
    position: absolute;
    top: 50%;
    margin-top: -.004rem;
    left: .002rem;
    width: .008rem;
    height: .008rem;
    display: inline-block;
    vertical-align: center;
    background: url("/Public/Home/images/square_8edc3ba.png") no-repeat;
    background-size: .008rem;
}

.cmp-page-index .feature-wrap .feature-icon {
    position: relative;
    overflow: hidden;
    margin-top: .05rem;
    margin-left: -rem(20px);
}

.cmp-page-index .feature-wrap .feature-icon li {
    position: relative;
    float: left;
    display: inline;
    width: .12rem;
    text-align: center;
    font-size: .014rem;
    color: #2b2b2b;
}

.cmp-page-index .feature-wrap .feature-icon i {
    margin: 0 auto .017rem;
    display: block;
    width: .086rem;
    height: .087rem;
}

.feature-icon li p {
    line-height: 20px;
}

.cmp-page-index .feature-wrap .feature-icon0 {
    background: url("/Public/Home/images/feature_icon/icon0_f5b5c36.png") no-repeat;
    background-size: .084rem .086rem;
}

.cmp-page-index .feature-wrap .feature-icon1 {
    background: url("/Public/Home/images/feature_icon/icon1_d397b76.png") no-repeat;
    background-size: .084rem .086rem;
}

.cmp-page-index .feature-wrap .feature-icon2 {
    background: url("/Public/Home/images/feature_icon/icon2_8e85721.png") no-repeat;
    background-size: .084rem .086rem;
}

.cmp-page-index .feature-wrap .feature-icon3 {
    background: url("/Public/Home/images/feature_icon/icon3_32d5333.png") no-repeat;
    background-size: .084rem .086rem;
}

.cmp-page-index .feature-wrap .feature-icon4 {
    background: url("/Public/Home/images/feature_icon/icon4_3f26907.png") no-repeat;
    background-size: .084rem .086rem;
}

.cmp-page-index .feature-wrap .feature-icon5 {
    background: url("/Public/Home/images/feature_icon/icon5_61df33a.png") no-repeat;
    background-size: .084rem .086rem;
}
.cmp-page-index .feature-wrap .feature-icon6 {
    background: url("/Public/Home/images/feature_icon/icon6_61df33a.png") no-repeat;
    background-size: .084rem .086rem;
}
.cmp-page-index .feature-wrap .feature-icon7 {
    background: url("/Public/Home/images/feature_icon/icon7_61df33a.png") no-repeat;
    background-size: .084rem .086rem;
}
.cmp-page-index .feature-wrap .feature-icon8 {
    background: url("/Public/Home/images/feature_icon/icon8_61df33a.png") no-repeat;
    background-size: .084rem .086rem;
}

.parallax-scene {
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -.96rem;
    width: 1.92rem;
    height: 1.14rem;
    z-index: -3;
}

.parallax-scene div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.parallax-scene .scene-placeholder {
    background: url(/Public/Home/images/xy/section0_bg_3e36039.png) no-repeat center;
    background-size: cover;
    z-index: -4;
}

.parallax-scene .scene {
    background: url("/Public/Home/images/xy/section0_bg_3e36039.png") no-repeat center;
    background-size: cover;
    z-index: -3;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-width: 720px;
    width: 100%;
    height: 80px;
    background: rgba(255,255,255,.95);
    z-index: 10;
    display: none;
}

.navbar .logo-icon {
    position: absolute;
    left: 30px;
    top: 13px;
    display: block;
    width: 140px;
    height: 54px;
    outline: 0;
    background: url("/Public/Home/images/xy/logo_icon_b20716f.png") no-repeat;
}

.navbar .down-wrap {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: .06rem;
    width: 455px;
    color: #666;
}

.navbar .down-wrap li {
    position: relative;
    float: left;
    width: 150px;
    height: 80px;
    font-size: 0;
    zoom: 1;
}

.navbar .down-wrap li.seperator {
    background-repeat: no-repeat;
}

.navbar .navbar-btn {
    position: relative;
    float: left;
    display: inline-block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
    color: #666;
    cursor: pointer;
}

.navbar .navbar-btn .initial,.navbar .navbar-btn .hover {
    position: absolute;
    left: 50%;
    margin-left: -60px;
    top: 50%;
    margin-top: -20px;
    margin-left: -45px;
    width: 120px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    transition: opacity .3s;
}

.navbar .navbar-btn .initial {
    opacity: 1;
}

.navbar .navbar-btn .hover {
    color: #fff;
    opacity: 0;
}

.navbar .navbar-btn .ripple {
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: -100px;
    width: 200px;
    height: 200px;
    transform: scale(0.3);
    opacity: 0;
    transition: transform .3s,opacity .3s;
    background: #ffb22b;
    border-radius: 999px;
}

.navbar .navbar-btn:hover .initial {
    opacity: 0;
}

.navbar .navbar-btn:hover .hover {
    opacity: 1;
}

.navbar .navbar-btn:hover .ripple {
    transform: scale(1);
    opacity: 1;
}

.navbar .nav-btn-ios i {
    position: absolute;
    top: 50%;
    left: -5px;
    margin-top: -15px;
    width: 21px;
    height: 25px;
    background-repeat: no-repeat;
}

.navbar .nav-btn-ios .hover i {
    background-repeat: no-repeat;
}

.navbar .nav-btn-android i {
    position: absolute;
    top: 50%;
    left: -5px;
    margin-top: -14px;
    width: 23px;
    height: 26px;
    background-repeat: no-repeat;
}

.navbar .nav-btn-android .hover i {
    background-repeat: no-repeat;
}

.navbar .navbar-qrcode {
    position: relative;
    width: 100%;
    height: 100%;
}

.navbar .navbar-qrcode-icon {
    position: absolute;
    top: 50%;
    margin-top: -11px;
    left: 20px;
    width: 22px;
    height: 22px;
    cursor: pointer;
    background-repeat: no-repeat;
}

.navbar .navbar-qrcode-icon:hover div {
    opacity: 1;
    transform: scale(1);
}

.navbar .navbar-qrcode div {
    position: absolute;
    left: 50%;
    margin-left: -82px;
    top: 70px;
    padding: 10px;
    width: 144px;
    text-align: center;
    background: rgba(255,255,255,.8);
    border-radius: 3px;
    opacity: 0;
    transform: scale(0);
    transition: all .3s ease;
    transform-origin: top center;
}

.navbar .navbar-qrcode div img {
    width: 100%;
}

.navbar .navbar-qrcode div .tringle {
    position: absolute;
    left: 50%;
    margin-left: -14px;
    top: -13px;
    width: 28px;
    height: 13px;
    background-repeat: no-repeat;
}

.navbar .navbar-qrcode p {
    padding-top: 10px;
    color: #696969;
    font-size: 16px;
}

.monitor {
    display: none;
}

@media \0screen\,screen\9 {
    *html {
        background-image: url(about:blank);
        background-attachment: fixed;
        overflow-x: hidden;
    }

    .navbar {
        _position: absolute;
        _left: expression(eval(document.documentElement.scrollLeft));
        _top: expression(eval(document.documentElement.scrollTop));
        background: #fff;
    }

    .navbar .navbar-btn .initial {
        opacity: 1;
        visibility: visible;
    }

    .navbar .navbar-btn .hover {
        opacity: 1;
        visibility: hidden;
    }

    .navbar .navbar-btn .ripple {
        opacity: 1;
        visibility: hidden;
    }

    .navbar .navbar-btn:hover .initial {
        visibility: hidden;
    }

    .navbar .navbar-btn:hover .hover {
        visibility: visible;
    }

    .navbar .navbar-btn:hover .ripple {
        visibility: visible;
    }

    .navbar .navbar-btn:hover {
        _border: 0;
    }

    .navbar .navbar-qrcode-icon div {
        background: #fff;
        opacity: 1;
        top: -9999px;
    }

    .navbar .navbar-qrcode-icon:hover div {
        top: 70px;
    }

    .navbar .navbar-qrcode-icon:hover {
        _border: 0;
    }

    .cmp-page-index .section0 .main {
        _padding-top: 1px;
    }

    .cmp-page-index .section0 .main .main-qrcode-icon .main-qrcode {
        top: -9999px;
        background: #fff;
        opacity: 1;
    }

    .cmp-page-index .section0 .main .main-qrcode-icon:hover .main-qrcode {
        top: 50%;
    }

    .cmp-page-index .section0 .main .main-qrcode-icon:hover {
        _border: 0;
    }

    .cmp-page-index .section0 .main h1 {
        _display: block;
    }

    .cmp-page-index .section0 .main .hr {
        _display: block;
    }

    .cmp-page-index .section0 .main p {
        _padding-bottom: 50px;
    }

    .cmp-page-index .section0 .main .hr {
        _padding-bottom: 0;
    }

    .cmp-page-index .section0 .arrow-down {
        _display: block;
    }

    .cmp-page-index .section1 .tringle.tringle-top {
        _border-color: #f5f5f5 WhiteSmoke #fff #fff;
        _filter: chroma(color=WhiteSmoke);
    }

    .cmp-page-index .section1 .tringle.tringle-bottom {
        _border-color: #fff #fff #f5f5f5 WhiteSmoke;
        _filter: chroma(color=WhiteSmoke);
    }

    .cmp-page-index .section2 .tringle.tringle-top {
        _border-color: #f5f5f5 #fff #fff #f5f5f5;
        _filter: chroma(color=WhiteSmoke);
    }

    .cmp-page-index .section2 .tringle.tringle-bottom {
        _border-color: #fff #f5f5f5 WhiteSmoke #fff;
        _filter: chroma(color=WhiteSmoke);
    }

    .cmp-page-index .section3 .tringle.tringle-top {
        _border-color: #f5f5f5 #fff #fff #f5f5f5;
        _filter: chroma(color=WhiteSmoke);
    }

    .parallax-scene {
        _position: absolute;
    }

    .pnghack {
        font-size: 0;
    }
}

.cmp-page-index .section0 .main-qrcode .small-tringle {
    background-position: -26px 0px;
}

.cmp-page-index .section4 .copyright i {
    background-position: 0px -31px;
}

.navbar .down-wrap li.seperator {
    background-position: -38px -86px;
}

.navbar .nav-btn-ios i {
    background-position: -18px -168px;
}

.navbar .nav-btn-ios .hover i {
    background-position: -18px -196px;
}

.navbar .nav-btn-android i {
    background-position: -16px -224px;
}

.navbar .nav-btn-android .hover i {
    background-position: -16px -253px;
}

.navbar .navbar-qrcode-icon {
    background-position: -17px -282px;
}

.navbar .navbar-qrcode div .tringle {
    background-position: -11px -307px;
}

.cmp-page-index .section0 .main-qrcode .small-tringle,.cmp-page-index .section4 .copyright i,.navbar .down-wrap li.seperator,.navbar .nav-btn-ios i,.navbar .nav-btn-ios .hover i,.navbar .nav-btn-android i,.navbar .nav-btn-android .hover i,.navbar .navbar-qrcode-icon,.navbar .navbar-qrcode div .tringle {
    background-image: url("../images/index_z_afadce9.png");
}
body[aos-duration='4000'] [aos], [aos][aos][aos-duration='4000']{
  transition-duration: 4000ms;
}
.new-pack{display:block;text-align:center;}
.new-pack img{margin:0 15px;width:114px;}